title: react文档1-concepts
date: 2018.9.14
tags:
http://react.css88.com/docs/thinking-in-react.html
2018.9.14 星期五 23:32
2018.9.14 星期六 00:45
HTML 表单元素与 React 中的其他 DOM 元素有所不同，因为表单元素自然地保留了一些内部状态。
在 HTML 中，表单元素如 <input>，<textarea> 和 <select>表单元素通常保持自己的状态，并根据用户输入进行更新。而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新。
我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”。
注意，Coconut 选项是初始化选中的，因为它的 selected 属性。React 中，并不使用这个 selected 属性，而是在根 select 标签中使用了一个 value 属性。这使得受控组件使用更方便，因为你只需要更新一处即可。
您可以将一个数组传递给 value 属性，允许你在 select 标签中选择多个选项：
因为它的值是只读的，所以它是 Reac t中的 不受控 组件。 它与其他不受控制的组件一样，将在 稍后的文档中 一起讨论。
当您需要处理多个受控的 input 元素时，您可以为每个元素添加一个 name 属性，并且让处理函数根据 event.target.name 的值来选择要做什么。
注意我们如何使用ES6 计算的属性名称语法来更新与给定输入名称相对应的 state(状态) 键：
在 受控组件 上指定值 prop 可防止用户更改输入，除非您希望如此。
如果你已经指定了一个 value ，但是输入仍然是可编辑的，你可能会意外地把 value 设置为undefined 或 null 。
以下代码演示了这一点。 （输入首先被锁定，但在短暂的延迟后可以编辑。）
ReactDOM.render(<input value="hi" />, mountNode);
setTimeout(function() {
ReactDOM.render(<input value={null} />, mountNode);
}, 1000);
有时使用受控组件有些乏味，因为你需要为每一个可更改的数据提供事件处理器，并通过 React 组件管理所有输入状态。
当你将已经存在的代码转换为 React 时，或将 React 应用程序与非 React 库集成时，这可能变得特别烦人。
在这些情况下，您可能需要使用不受控的组件，用于实现输入表单的替代技术。
通常情况下，同一个数据的变化需要几个不同的组件来反映。我们建议提升共享的状态到它们最近的祖先组件中。我们看下这是如何运作的。
我们知道 props(属性) 是只读的。 当 temperature 是 本地 state(状态)时， TemperatureInput 可以调用 this.setState() 来更改它。 然而，现在 temperature 来自父级作为 prop(属性) ，TemperatureInput 就无法控制它。
在 React 中，通常通过使组件“受控”的方式来解决。就像 DOM <input>一样接受一个 value 和一个 onChange prop(属性) ，所以可以定制 TemperatureInput 接受来自其父级 Calculator 的 temperature 和 onTemperatureChange 。
##经验总结
在一个 React 应用中，对于任何可变的数据都应该循序“单一数据源”原则。通常情况下，state 首先被添加到需要它进行渲染的组件。然后，如果其它的组件也需要它，你可以提升状态到它们最近的祖先组件。你应该依赖 从上到下的数据流向 ，而不是试图在不同的组件中同步状态。
### $_和双向数据绑定的对比
提升状态相对于双向绑定方法需要写更多的“模板”代码，
但是有一个好处，它可以更方便的找到和隔离 bugs。由于任何 state(状态) 都 “存活” 在若干的组件中，而且可以分别对其独立修改，所以发生错误的可能大大减少 。
另外，你可以实现任何定制的逻辑来拒绝或者转换用户输入。
如果某个东西可以从 props(属性) 或者 state(状态) 得到，那么它可能不应该在 state(状态) 中比较常见。
01:07